<template>
  <view class="OrderPage">
    <scroll-view scroll-y="true" class="scrollView">
      <view class="scrollContent">
        <view class="userInfo">
          <view class="addressView" @click="showAddress">
            <view class="left">
              <image class="addressIcon" :src="getStaticDir('/pos.svg')" />
              <view v-if="checkAddressItem.id">
                <view class="address">
                  {{ checkAddressItem.addressDetail }}
                </view>
                <view class="link">
                  {{ checkAddressItem.name }} <text class="phone">{{ checkAddressItem.mobile }}</text>
                </view>
              </view>
              <view v-else>
                请选择地址
              </view>
            </view>
            <uni-icons type="right" size="16" class="icon-rightArrow"></uni-icons>
          </view>
        </view>
        <view class="ProjectView">
          <view class="businessContent">
            <image class="image" :src="detail.imgUrls[0]"/>
            <view class="info">
              <view class="title">
                {{ detail.serviceName }}
              </view>
              <view class="num">
                ×10件
              </view>
              <view class="price">
                <text class="unit">
                  实付 ¥
                </text>
                {{ detail.servicePrice }}
              </view>
            </view>
          </view>
          <u-gap height="2" bg-color="#E9E9E9"></u-gap>
          <view class="remark" @click="remarkShow = true">
            <view class="remarkTitle">
              订单备注
            </view>
            <view class="remarkContent" :class="buyerRemark && 'remarkContentActive'">
              <view class="remarkText">{{ buyerRemark?buyerRemark:'无备注' }}</view>
              <uni-icons type="right" size="12" class="icon-rightArrow"></uni-icons>
            </view>
          </view>
        </view>

        <view class="pay">
          <view class="title">
            支付方式
          </view>
          <view>
            <radio-group @change="payChange">
              <view class="payItem" v-for="item in payList" :key="item.id">
                <view class="payName">{{ item.name }}</view>
                <view>
                  <radio :value="item.id" :checked="item.id == payType" color="#486be2" style="transform:scale(0.7)"/>
                </view>
              </view>
            </radio-group>
          </view>
        </view>
      </view>

    </scroll-view>
    <!-- 地址弹窗 -->
    <u-popup v-model="addressShow" mode="bottom" border-radius="48" :safe-area-inset-bottom="true">
      <view class="addressPicker">
        <view class="operate">
          <text>选择收货地址</text>
          <uni-icons type="closeempty" size="16" @click="addressShow = false" class="icon-close"></uni-icons>
        </view>
        <u-gap height="2" bg-color="#eee"></u-gap>
        <view class="address">
          <scroll-view scroll-y class="scrollAddress">
            <!-- <view v-for="(item,index) in addressList" :key="item.id"> -->
            <uni-swipe-action-item
              v-for="(item, index) in addressList"
              :key="item.id"
              :right-options="options"
              @click="addrClick($event, item.id)"
              @change="addrChange($event, index)"
            >
              <view class="addressItem">
                <view class="detail" @click="checkAddressItem = item;addressShow = false">
                  <i class="iconfont icon-check" v-if="checkAddressItem.id == item.id"></i>
                  <i class="iconfont icon-uncheck" v-else></i>
                  <view class="companyInfo">
                    <view class="info">
                      <image
                        v-if="item.defaultFlag"
                        class="default"
                        :src="getStaticDir('/default.png')"
                        mode="scaleToFill"
                      />
                      {{ item.addressDetail }}
                    </view>
                    <view class="link">
                      {{ item.name }}
                      <text class="phone">{{ item.mobile }}</text>
                    </view>
                  </view>
                </view>
                <i class="iconfont icon-edit" @click="handleAddress(item.id)"></i>
              </view>
              <u-gap height="2" style="width:calc(100% - 72rpx);margin:0 auto" bg-color="#eee" v-if="index < addressList.length-1"></u-gap>
            </uni-swipe-action-item>

          </scroll-view>
          <view class="addButton" @click="handleAddress()">新增收货地址</view>
        </view>
      </view>
    </u-popup>
    <!-- 备注弹窗 -->
    <u-popup v-model="remarkShow" mode="bottom" border-radius="48" :safe-area-inset-bottom="true">
      <view class="remarkPopup">
        <view class="operate">
          <text>备注</text>
          <uni-icons type="closeempty" size="16" @click="remarkShow = false" class="icon-close"></uni-icons>
        </view>
        <u-gap height="2" bg-color="#eee"></u-gap>
        <view class="remarkContent">
          <u-input
            @blur="inputBlur"
            v-model="buyerRemark"
            type="textarea"
            :custom-style="{
              'background': '#F7F7F7',
              'borderRadius': '8rpx',
              'padding':'24rpx'
            }"
            :height="280"
            :clearable="false"
            placeholder="可填写其他要求"
            :maxlength="500"/>
          <view class="wordLength" v-if="showLength">
            {{ buyerRemark.length }}/500
          </view>
          <view class="submitButton" @click="remarkSubmit">
            <text>确定</text>
          </view>
        </view>

      </view>

    </u-popup>
    <!-- 删除弹窗 -->
    <a-modal
      v-model="deleteModal"
      content="删除后无法恢复，是否确认删除地址？"
      :show-title="false"
      show-cancel-button
      :content-style="{ fontSize: '32rpx', padding: '34rpx 140rpx', color: '#000000' }"
      @confirm="deleteConfirm"
    >
    </a-modal>
    <view class="btn-bottom">
      <!-- <view class="cancelButton" @click="handleBack">
        <text>取消</text>
      </view> -->
      <view class="submitButton" @click="handleOrder">
        <text>立即支付</text>
      </view>
    </view>
  </view>
</template>
<script>
import moment from 'moment';
// import { getProductDetail, addressDelete, getMerchantDetail, getAddressList, userOrder } from '@/api/project.js';
export default {
  name: 'OrderPage',
  components: {},
  props: {},
  data() {
    return {
      id: '',
      show: true,
      addressShow: false,
      detail: {
        id: '2',
        imgUrls: [this.staticDir + '/left.jpg'],
        serviceName: '大金柜',
        serviceDetail: '',
        servicePrice: '888'
      },
      addressList: [],
      checkAddressItem: {
        id: '11',
        addressDetail: '浙江省杭州市西湖区文一西路969号',
        name: '朱十一',
        mobile: '17805800265'
      },
      buyerRemark: '',
      showLength: true,
      current: null,
      deleteModal: false,
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#FF4321'
          }
        }
      ],
      deleteId: null,
      imgUrls: '',
      payList: [
        { id: '1', name: '微信支付' },
        { id: '2', name: '云闪付支付' }
      ],
      payType: '1',
      remarkShow: false
    };
  },
  computed: {},
  methods: {
    // 失去焦点。ios系统键盘顶上去后无法恢复
    inputBlur() {
      document.activeElement.scrollIntoViewIfNeeded(true);
    },
    getImgUrls(url) {
      console.log('imgUrls ', url);
      this.imgUrls = url;
    },
    addrClick(e, id) {
      console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮');
      this.deleteId = id;
      this.deleteModal = true;
    },
    addrChange(e, index) {
      console.log('当前状态：' + e + '，下标：' + index);
      if (e == 'none') {
        this.current = null;
      } else {
        this.current = index;
      }
    },
    showAddress() {
      this.addressShow = true;
      // getAddressList({ pageSize: 999 }).then((res) => {
      //   res.data.forEach(item => {
      //     if (item.addressDetail) {
      //       item.addressDetail = item.addressDetail.replace('%$', ' ');
      //     }
      //   });
      //   this.addressList = res.data;
      // });
    },
    handleAddress(id) {
      if (id) {
        uni.navigateTo({
          url: '/pages/mine/address/address?id=' + id
        });
      } else {
        uni.navigateTo({
          url: '/pages/mine/address/address'
        });
      }
      this.addressShow = false;
    },
    handleBack() {
      uni.navigateBack();
    },
    handleOrder() {
      uni.navigateTo({
        url: '/pages/order/detail/detail'
      });
      // if (!this.checkAddressItem.name) {
      //   uni.showModal({
      //     title: '提示',
      //     content: '请选择服务地址！'
      //   });
      //   return;
      // }
      // const pd = {
      //   addressId: this.checkAddressItem.id,
      //   buyerLat: this.checkAddressItem.lat,
      //   buyerLon: this.checkAddressItem.lng,
      //   buyerName: this.checkAddressItem.name,
      //   buyerAddress: this.checkAddressItem.addressDetail,
      //   buyerMobile: this.checkAddressItem.mobile,
      //   buyerAreaCode: this.checkAddressItem.areaCode,
      //   buyerRemark: this.buyerRemark,
      //   productId: this.id,
      //   oneKeyFilesUrl: this.imgUrls
      // };

      // console.log('pd', pd);
      // userOrder(pd).then(({ data }) => {
      //   uni.navigateTo({
      //     url: '/pages/service/project/order/success?id=' + data.orderNo
      //   });
      // });
    },
    // 支付
    payChange(evt) {
      console.log(evt);
      this.payType = evt.detail.value;
    },
    // 提交备注
    remarkSubmit() {
      this.remarkShow = false;
    }
  },
  watch: {},
  // 页面周期函数--监听页面加载
  onLoad: function(option) {
    const platform = process.env.UNI_PLATFORM;
    if (platform == 'mp-alipay') {
      this.showLength = false;
    }
    this.id = option.id;
    // getProductDetail({ id: this.id }).then(({ data }) => {
    //   data.imgUrls = data.imgUrls.split(',');
    //   this.detail = data;
    //   getMerchantDetail({ id: data.ownMerchantId }).then((res) => {
    //     this.shop = res.data;
    //   });
    // });
    uni.$on('updateAddress', () => {
      this.showAddress();
    });
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {

  },
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {}
  // 页面处理函数--监听用户下拉动作
  // onPullDownRefresh() { uni.stopPullDownRefresh(); },
  // 页面处理函数--监听用户上拉触底
  // onReachBottom() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  // onPageScroll(event) {},
  // 页面处理函数--用户点击右上角分享
  // onShareAppMessage(options) {},
};
</script>

<style lang="scss" scoped>
/* #ifdef MP-BAIDU */
// @import '/static/iconfont.css';
/* #endif */
  .OrderPage{
    @import "./index.scss";
  }
</style>
